<template>
  <div style="width:100%; overflow-y: auto; height: 100%">
    <FoldCard cardName="图形设置" v-show="current.id">
      <template slot="cardBody">
        <p style="padding-left: 15px; color:#aaa; font-size: 14px"> 用于当前选中的图形：</p>
        <div class="row line">
          <label for="gname" class="col-sm-2 pdh">标示</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="gname" v-model="graphName" @change="changeKey"
                   placeholder="必填，图唯一标示，用于组件代码调用">
          </div>
        </div>
        <div class="row line">
          <label for="gText" class="col-sm-2 pdh">备注</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="gText" v-model="graphText" placeholder="描述">
          </div>
        </div>
      </template>
    </FoldCard>
    <FoldCard cardName="项目设置">
      <template slot="cardBody">
        <p> </p>
        <div class="W100" style="padding: 10px 10px 10px 20px">
          <form class="form-horizontal" role="form">
            <div class="row">
              <label for="pname" class="col-sm-2 pdh">项目名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="pname" v-model="projectName" placeholder="项目名">
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <label for="lastname" class="col-sm-2 control-label pdh">描述</label>
              <div class="col-sm-10">
                <textarea style="height: 120px" class="form-control" id="lastname" v-model="projectDescribe" placeholder="介绍">
                </textarea>
              </div>
            </div>
          </form>
        </div>
      </template>
    </FoldCard>
    <FoldCard cardName="接口设置">
      <template slot="cardBody">
        <p style="color: #aaa; font-size: 14px; padding-left: 15px"> 注：Ajax请求接口，一个图对应一个地址</p>
        <div style="padding: 10px 10px 30px 20px">
          <div class="row" v-for="(v, k) in chartKeys" :key="k">
            <div class="col-sm-2 pdh" style="border: 0px solid #ccc; padding-top:6px; font-size: 14px; ">{{v.key}}</div>
            <div class="col-sm-10">
              <input type="text" class="form-control" @change="changeUrl(k)" v-model="v.url" placeholder="url">
            </div>
          </div>
        </div>
      </template>
    </FoldCard>
    <FoldCard cardName="接口设置">
      <template slot="cardBody">
        <p style="color: #aaa; font-size: 14px; padding-left: 15px"> 用于开发人员</p>
        <div style="padding: 10px 10px 30px 20px">
          <button class="btn btn-primary btn-md btn-block" type="submit" @click="exportCode">导出组件</button>
        </div>
      </template>
    </FoldCard>
  </div>
</template>

<script>
import FoldCard from './FoldCard';
import Chart from '../chart/chart';
import * as D from '../js/download';

var vm = {
  name: 'EditRow',
  components: {
    FoldCard
  },
  data () {
    return {
      rangeValue: 18,
      data: [3, 6, 3, 1],
      rowStatus: [1, 1, 1, 1],
      // 图形组件的名称标志
      chartKeys: {}, // Object.keys(Chart.instances).map((k) => Chart.instances[k].key),
      projectName: Chart.project.name,
      projectDescribe: Chart.project.describe,
      // currentId: Chart.current.id,
      graphName: '',
      graphText: '',
      current: { id: undefined },
      // 用于请求结束后状态更新
      status: {}
    }
  },
  mounted: function () {
    this.current = Chart.current;
    this.status = Chart.status;
    this.init(this.current.id);
  },
  methods: {
    init: function (id) {
      if (!id) return;
      this.graphName = Chart.instances[id].key;
      this.graphText = Chart.instances[id].describe;
    },
    // key: 单个图形实例唯一标示
    // 存于Chart.instances[Chart.current.id].key, 用于代码调用和接口
    changeKey: function (obj) {
      let name = $(obj.target).val();
      let cache = Object.values(Chart.instances).reduce((a, b) => { a[b.key] = 1; return a }, {});
      if (name in cache) {
        alert(name + ' 已存在于其它图形，请重新输入！');
        $('#gname').val('');
        $('#gname').focus();
        $('#gname').addClass('has-error');
        return;
      }
      $('#gname').removeClass('has-error');
      if (Chart.current.id) Chart.instances[Chart.current.id].key = this.graphName;
      this.updateKeys();
    },
    updateKeys: function () {
      this.chartKeys = Object.keys(Chart.instances).reduce((a, b) => {
        a[b] = { key: Chart.instances[b].key, url: Chart.instances[b].url };
        return a;
      }, {});
    },
    // 监听并回写入全局变量
    changeUrl: function (id) {
      Chart.instances[id]['url'] = this.chartKeys[id].url;
    },
    // 导出组件代码
    exportCode: function () {
      D.download();
    }
  },
  watch: {
    projectName: function () {
      Chart.project.name = this.projectName;
    },
    projectDescribe: function () {
      Chart.project.projectDescribe = this.projectDescribe;
    },
    graphText: function () {
      if (Chart.current.id) Chart.instances[Chart.current.id].describe = this.graphText;
    },
    // 图形选择切换
    'current.id': function (id) {
      this.init(id);
      $('#gname').removeClass('has-error');
    },
    'status': {
      handler: function (f) {
        if (f.flag === 1) this.updateKeys();
      },
      deep: true
    }
  }
}

export default vm;
</script>

<style scoped>
.pdh { padding-left: 5px!important; padding-right: 5px!important; padding-top: 5px; font-size: 15px }
.has-error { border: 1px solid #f00; box-shadow:none }
.line {padding: 10px 0px 10px 10px; margin: 0px 0px}
</style>
